WD PLUS 2020-11 (dashboard)

Twoim zadaniem jest uzupełnienie i wykorzystanie funkcji getMoveName oraz displayResult w taki sposób, aby gra działała poprawnie.

W uzupełnieniu deklaracji tych funkcji pomoże Ci rozwiązanie poprzedniego zadania, ponieważ przenosimy do tych funkcji logikę, którą już napisaliśmy.

Wykorzystanie funkcji getMoveName

Zacznij od wstawienia tej funkcji na początku pliku js/script.js. Teraz zajmiemy się jej wykorzystaniem w dotychczasowym kodzie projektu. Pamiętaj, że kod tej funkcji będzie wymagał uzupełnienia, co zrobimy za chwilę.

Znajdź fragment kodu, w którym deklarujesz zmienną computerMove:

let computerMove = 'nieznany ruch';

Po tej linii znajdziesz wyrażenie if...else if..., które zmienia wartość zmiennej computerMove w zależności od wartości zmiennej randomNumber.

Zacznij od zamknięcia całego wyrażenia if...else if... w komentarz blokowy, czyli taki który może obejmować wiele linii. Zrobisz to, wpisując /* w miejscu rozpoczęcia komentarza oraz */ w miejscu jego zakończenia. Dzięki temu ten fragment kodu nie będzie działał, ale pozostanie w pliku – będzie nam za chwilę potrzebny do uzupełnienia funkcji getMoveName.

Teraz zmień deklarację zmiennej computerMove tak, aby zapisać w niej wartość zwracaną przez funkcję getMoveName:

let computerMove = getMoveName(randomNumber);

Możesz teraz przetestować czy wszystko działa poprawnie. Pamiętaj tylko, że jeszcze nie uzupełniliśmy deklaracji funkcji getMoveName, więc będzie ona zwracać jedynie 'kamień' lub 'nieznany ruch'.

Następnie w analogiczny sposób zmień deklarację zmiennej playerMove oraz zakomentuj (czyli zamknij w komentarzu) wyrażenie if...else if..., które modyfikuje wartość tej zmiennej.

Ostatnim krokiem będzie uzupełnienie deklaracji funkcji getMoveName. Wzorując się na zakomentowanym fragmencie kodu, spraw by funkcja zwracała 'papier' lub 'nożyce', kiedy argument będzie miał wartość 2 lub 3.

W rezultacie gra powinna działać tak samo, jak przed wykonaniem tego zadania, ale zamiast osobnych wyrażeń if...else if... dla ruchów komputera i gracza, teraz mamy tylko jedno – w deklaracji funkcji getMoveName.

Wykorzystanie funkcji displayResult

Tym razem nie będziemy kopiować funkcji z przykładu pokazanego wcześniej w tym submodule. Zamiast tego napisz samodzielnie deklarację funkcji displayResult. Ma ona przyjmować dwa argumenty, które nazwiemy argComputerMove i argPlayerMove.

Następnie do deklaracji tej funkcji przenieś fragment kodu odpowiedzialny za wyświetlenie wyniku gry. Musisz go zmodyfikować w taki sposób, aby zamiast zmiennych computerMove i playerMove wykorzystywał argumenty argComputerMove i argPlayerMove.

Pamiętaj, aby w miejscu usuniętego kodu wstawić wywołanie funkcji displayResult!

Rozwiązywanie problemów

W trakcie wykonywania zadania możesz napotkać problemy. Aby sobie z nimi poradzić, używaj console.log do sprawdzenia co dzieje się w kodzie. Możesz np.:

• na początku deklaracji którejś funkcji wstawić console.log wyświetlający jakiś tekst, aby sprawdzić, czy ta funkcja w ogóle się wykonuje,
• użyć console.log do wyświetlenia argumentów funkcji,
• wstawić console.log do bloków if, else if i/lub else, aby sprawdzić, który z nich zostanie wykonany,
• sprawdzić co zwraca funkcja, kiedy podamy jej konkretne argumenty, wpisując np. na końcu pliku console.log(getMoveName('2'));,
• użyć console.log po linii ustawiającej wartość jakiejś zmiennej, aby wiedzieć jaka wartość została w niej zapisana.

Dzięki temu, w konsoli możesz zobaczyć każdy krok działania skryptu. Szczególnie w początkowych etapach nauki, bardzo dobrym podejściem jest dodawanie console.log, nawet jeśli skrypt działa poprawnie, aby lepiej zrozumieć jego funkcjonowanie.

Możesz nam wierzyć, że zwyczaj używania console.log często jest kluczową różnicą pomiędzy developerem, który sprawnie rozwiązuje problemy, a tym, który godzinami rwie włosy z głowy. Dlatego od teraz, na pytanie "dlaczego to nie działa" niech zawsze Twoją odpowiedzią będzie "użyję console.log!" ;)

W sprawnym korzystaniu z console.log może Ci pomóc informacja, że możesz tej funkcji przekazywać wiele argumentów, co jest wygodniejsze niż używanie + do łączenia tekstów. Wszystkie argumenty zostaną wyświetlone w konsoli. Możesz np. dodać taką linię na początku funkcji displayResult:

console.log('moves:', argComputerMove, argPlayerMove);

Po wykonaniu zadania zapisz commit i wyślij jego link do sprawdzenia.